import * as THREE from 'three';
import { threeViewStore } from '../../store/models/data';
import pinia from '../../store/index';
var moveFlag = false;
const store = threeViewStore(pinia);
console.log(store, 'store');

/**测距 */
// 接下来解决的问题
// 1.如何点击获取当前点坐标，并画点
// 2.画的点的个数等于二时就画一条线，如果画了第三个点，就清空之前画的点与线
// 3.换算，把数据换算成实际单位的数据，如换算成cm
export function distance(visible: Boolean) {
  let domContainer = document.getElementById('threeContainer');
  // 使用visible判断当前是选中还是释放状态
  if (visible) {
    domContainer.style.cursor = 'crosshair';
    domContainer?.addEventListener('mousedown', onmousedown);
    window.controls.addEventListener('change', onPointerMove);
    domContainer?.addEventListener('mouseup', onPointerClick);
  } else {
    domContainer.style.cursor = 'default';
    domContainer?.removeEventListener('mouseup', onPointerClick);
    domContainer?.removeEventListener('mousedown', onmousedown);
    window.controls.removeEventListener('change', onPointerMove);
  }
}
function onmousedown() {
  // moveFlag = false;//如果鼠标发生了移动，就将moveFlag设置为false,则不再触发onPointerClick方法，即不再绘制点
}
function onPointerMove() {
  moveFlag = true;
}
let pointsArr: number[] = [];
let geometryArr: any = [];
let pointsArrrRes: any = [];

let pointsArrV3: any = [];
let labelText = document.createElement('span');
function onPointerClick(event: any) {
  console.log(event, '点击了');
  const pointer = new THREE.Vector2();
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(pointer, window.camera);
  let position = [];
  const intersects = raycaster.intersectObjects(window.threeScene.children, true);

  if (intersects.length > 0) {
    let x = intersects[0].point.x;
    let y = intersects[0].point.y;
    let z = intersects[0].point.z;

    // 更新 pointsArr 和 pointsArrV3
    pointsArr.push(x, y, z); // 用于绘制线
    // 将每个点的坐标存储为一个数组
    const point = [x, y, z];

    // 输出每个点击点的坐标
    console.log('Clicked point coordinates:', point);
    pointsArrrRes.push(point); // 存储每个点为 [x, y, z] 的数组
    console.log('Clicked point coordinates:', pointsArrrRes);

    pointsArrV3.push(intersects[0].point); // 用于距离计算和标签

    // 绘制点
    const geometry = new THREE.BufferGeometry();
    const color = new Float32Array([1, 0, 0]);
    geometry.setAttribute('position', new THREE.Float32BufferAttribute([x, y, z], 3));
    geometry.setAttribute('color', new THREE.BufferAttribute(color, 3));
    geometry.computeBoundingSphere();

    const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true, depthTest: false });
    const drawpoint = new THREE.Points(geometry, material);
    window.threeScene.add(drawpoint);
    geometryArr.push(drawpoint);

    // 每次点击后，绘制当前点和上一个点之间的线
    if (pointsArrV3.length > 1) {
      drawLine(pointsArr, event); // 不受点数限制，始终绘制连接线
    }
  }
}

export function drawLine(pointsArr: any) {
  console.log(pointsArr, 'pointsArrV3');

  // 只取前两个点的坐标，画一条连接线
  const geometry = new THREE.BufferGeometry();
  const color = new Float32Array([1, 0, 0]);
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(pointsArr.slice(-6), 3)); // 最后两个点
  geometry.setAttribute('color', new THREE.BufferAttribute(color, 3));
  geometry.computeBoundingSphere();

  const material = new THREE.LineBasicMaterial({ vertexColors: true, depthTest: false });
  const line = new THREE.Line(geometry, material);
  line.frustumCulled = false; // 确保屏幕外的线段也能显示
  window.threeScene.add(line);
  geometryArr.push(line);
}

/**绘制标签 */
function drawLabel(line: any, event: any) {
  // 绘制标签展示距离，需要计算起点和终点之间的距离。通过与真实环境下的距离进行换算
  // 设置标签展示位置
  labelText.style.position = 'absolute';
  labelText.style.top = '0';
  labelText.style.color = 'red';
  labelText.style.pointerEvents = 'none';
  document.body.appendChild(labelText);
  // 源代码是构建虚线的时候才实时渲染
  line.onBeforeRender = function () {
    // 设置标签位置，实时渲染
    setLabelPosition(labelText, event);
  };
}
/**动态渲染修改标签位置 */
function setLabelPosition(labelText: any, event: any) {
  let pointLabel = new THREE.Vector3().lerpVectors(pointsArrV3[1], pointsArrV3[0], 0);
  pointLabel = WorldtoScreenPosition(pointLabel, event);
  // console.log(pointLabel,'pointLabel');

  labelText.style.left = pointLabel.x + 'px';
  labelText.style.top = pointLabel.y + 5 + 'px';
  // console.log(labelText.style.top,'labelText.style.top');

  let distance = pointsArrV3[1].distanceTo(pointsArrV3[0]); // 计算显示的数值
  // 根据两个坐标点计算向量的长度v1(x1,y1,z1),v2(x2,y2,z2),
  // 两点确定的向量长度 =
  // var dx = v1.x - v2.x;
  // var dy = v1.y - v2.y;
  // var dz = v1.z - v2.z;
  // return Math.sqrt( dx * dx + dy * dy + dz * dz );

  labelText.innerHTML = distance.toFixed(2) + 'm'; // toFixed把 Number 四舍五入为指定小数位数的数字
  /** 坐标转换，再把vector3坐标转为屏幕坐标*/
  function WorldtoScreenPosition(pos: any, eve: any) {
    // const worldVector = new THREE.Vector3(pos.x, pos.y, pos.z)
    const standardVector = pos.project(window.camera); // 进行投影转换，不太懂为啥转，里面执行了啥操作
    const widthHalf = eve.view.innerWidth / 2;
    const heightHalf = eve.view.innerHeight / 2;
    return {
      x: Math.round(standardVector.x * widthHalf + widthHalf),
      y: Math.round(-standardVector.y * heightHalf + heightHalf),
      z: 1,
    };
  }
}
